<template>
  <view class="dict-data-container">
    <!-- 搜索区域 -->
    <view class="search-box">
      <view class="dict-info">
        <view class="info-item">
          <text class="label">字典名称：</text>
          <text class="value">{{ dictName }}</text>
        </view>
        <view class="info-item">
          <text class="label">字典类型：</text>
          <text class="value">{{ dictType }}</text>
        </view>
      </view>
      <view class="btn-group">
        <button class="add-btn" @tap="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          <text>新增</text>
        </button>
      </view>
    </view>

    <!-- 数据列表 -->
    <view class="data-list" v-if="dataList.length > 0">
      <view v-for="(item, index) in dataList" :key="index" class="data-item">
        <view class="data-info">
          <view class="info-row">
            <text class="label">数据标签：</text>
            <text class="value">{{ item.dictLabel }}</text>
          </view>
          <view class="info-row">
            <text class="label">数据键值：</text>
            <text class="value">{{ item.dictValue }}</text>
          </view>
          <view class="info-row">
            <text class="label">显示排序：</text>
            <text class="value">{{ item.dictSort }}</text>
          </view>
          <view class="info-row">
            <text class="label">状态：</text>
            <text class="value" :class="item.status === '0' ? 'text-success' : 'text-danger'">
              {{ item.status === '0' ? '正常' : '停用' }}
            </text>
          </view>
          <view class="info-row" v-if="item.remark">
            <text class="label">备注：</text>
            <text class="value">{{ item.remark }}</text>
          </view>
        </view>
        <view class="data-actions">
          <button class="action-btn edit-btn" @tap="handleEdit(item)">
            <uni-icons type="compose" size="14" color="#409eff"></uni-icons>
          </button>
          <button class="action-btn delete-btn" @tap="handleDelete(item)">
            <uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listData, delData } from '@/api/system/dict/data'

export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dictType: undefined,
        dictLabel: undefined,
        status: undefined
      },
      dictName: '',
      dictType: '',
      dataList: [],
      loading: false,
      hasMore: true,
      total: 0,
      loadMoreStatus: 'more',
      contentText: {
        contentdown: '上拉显示更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      }
    }
  },
  onLoad(options) {
    if (options.dictType) {
      this.dictType = options.dictType
      this.dictName = options.dictName || ''
      this.queryParams.dictType = options.dictType
      this.getList('refresh')
    }
  },
  methods: {
    // 获取列表数据
    async getList(type = 'more') {
      if (this.loading) return
      this.loading = true

      try {
        if (!this.queryParams.dictType) {
          throw new Error('字典类型不能为空')
        }

        const res = await listData(this.queryParams)

        if (res.code === 200) {
          const { rows, total } = res

          if (type === 'refresh' || this.queryParams.pageNum === 1) {
            this.dataList = rows
          } else {
            this.dataList = [...this.dataList, ...rows]
          }

          this.total = total
          this.hasMore = this.dataList.length < total
          this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
        }
      } catch (error) {
        this.loadMoreStatus = 'more'
        uni.showToast({
          title: '获取字典数据列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        if (type === 'refresh') {
          uni.stopPullDownRefresh()
        }
      }
    },

    // 新增字典数据
    handleAdd() {
      uni.navigateTo({
        url: `/pages/system/dict/data-form?dictType=${this.dictType}`
      })
    },

    // 编辑字典数据
    handleEdit(item) {
      uni.navigateTo({
        url: `/pages/system/dict/data-form?dictCode=${item.dictCode.toString()}&dictType=${this.dictType}`
      })
    },

    // 删除字典数据
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: `是否确认删除字典编码为"${item.dictCode}"的数据项？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await delData(item.dictCode.toString())
              if (result.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.queryParams.pageNum = 1
                this.getList('refresh')
              }
            } catch (error) {
            }
          }
        }
      })
    },

    // 下拉刷新
    onPullDownRefresh() {
      this.queryParams.pageNum = 1
      this.dataList = []
      this.hasMore = true
      this.getList('refresh')
    },

    // 上拉加载更多
    onReachBottom() {
      if (this.hasMore && !this.loading) {
        this.queryParams.pageNum++
        this.getList('more')
      }
    }
  }
}
</script>

<style lang="scss">
.dict-data-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;

  .search-box {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);

    .dict-info {
      margin-bottom: 20rpx;

      .info-item {
        display: flex;
        margin-bottom: 12rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: #606266;
        }

        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }

    .btn-group {
      display: flex;
      justify-content: flex-end;

      .add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        width: 140rpx;
        height: 64rpx;
        font-size: 26rpx;
        background-color: #67c23a;
        color: #fff;
        border-radius: 8rpx;
        padding: 0;
        box-shadow: 0 2rpx 6rpx rgba(103,194,58,0.2);

        &:active {
          opacity: 0.9;
          transform: scale(0.98);
        }

        text {
          margin-left: 4rpx;
        }
      }
    }
  }

  .data-list {
    .data-item {
      position: relative;
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 24rpx;
      border-radius: 16rpx;
      box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

      .data-info {
        padding-right: 100rpx; // 为操作按钮预留空间

        .info-row {
          display: flex;
          margin-bottom: 16rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            width: 140rpx;
            font-size: 28rpx;
            color: #606266;
          }

          .value {
            flex: 1;
            font-size: 28rpx;
            color: #333;

            &.text-success {
              color: #67c23a;
            }

            &.text-danger {
              color: #f56c6c;
            }
          }
        }
      }

      .data-actions {
        position: absolute;
        right: 32rpx;
        top: 32rpx;
        display: flex;
        gap: 16rpx;

        .action-btn {
          width: 56rpx;
          height: 56rpx;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 28rpx;
          background-color: #f8f9fa;
          border: none;

          &:active {
            opacity: 0.8;
          }

          &.edit-btn {
            &:active {
              background-color: #ecf5ff;
            }
          }

          &.delete-btn {
            &:active {
              background-color: #fef0f0;
            }
          }
        }
      }
    }
  }

  .empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    background-color: #fff;
    border-radius: 12rpx;
    margin-top: 20rpx;

    .empty-text {
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>